<template>
  <div class="user-detail-container">
    <!-- 页面标题 -->
    <el-page-header @back="handleBack" content="用户详情信息" />

    <!-- 主要内容区 -->
    <el-card class="user-detail-card" shadow="hover" style="margin-top: 20px;">
      <div class="user-header">
        <!-- 头像区域 -->
        <el-avatar :src="userInfo.avatar" size="large" class="user-avatar">
          <template #fallback>
            <el-icon><user /></el-icon>
          </template>
        </el-avatar>

        <!-- 基本信息头部 -->
        <div class="user-header-info">
          <div class="user-name-group">
            <h2 class="user-nickname">{{ userInfo.nickname }}</h2>
            <el-tag :type="userInfo.status === 1 ? 'success' : 'info'" style="margin-left: 10px;">
              {{ userInfo.status === 1 ? '已认证' : '未认证' }}
            </el-tag>
          </div>
          <p class="user-username">账号：{{ userInfo.username }}</p>
        </div>
      </div>

      <!-- 详细信息表单 -->
      <el-row :gutter="20" style="margin-top: 30px;">
        <!-- 左侧列 -->
        <el-col :span="12">
          <el-form label-width="120px" :model="userInfo">
            <el-form-item label="用户编号">
              <el-input v-model="userInfo.id" disabled />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" disabled />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userInfo.gender" disabled />
            </el-form-item>
            <el-form-item label="信誉分">
              <el-input v-model="userInfo.credit" disabled />
            </el-form-item>
          </el-form>
        </el-col>

        <!-- 右侧列 -->
        <el-col :span="12">
          <el-form label-width="120px" :model="userInfo">
            <el-form-item label="连续签到天数">
              <el-input v-model="userInfo.continuoussigndays" disabled />
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="userInfo.address" disabled />
            </el-form-item>
            <el-form-item label="Salt">
              <el-input v-model="userInfo.salt" disabled />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userInfo.password" disabled type="password" />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 个人简介 -->
      <el-form label-width="120px" :model="userInfo" style="margin-top: 20px;">
        <el-form-item label="个人简介">
          <el-input
              v-model="userInfo.intro"
              disabled
              type="textarea"
              rows="4"
              style="width: 100%;"
          />
        </el-form-item>
      </el-form>

      <!-- 操作按钮 -->
      <div class="detail-actions" style="margin-top: 20px; text-align: right;">
        <el-button @click="handleBack">返回列表</el-button>
        <el-button type="primary" style="margin-left: 10px;">编辑信息</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { User } from '@element-plus/icons-vue';
import { useRouter,useRoute } from 'vue-router';
import server from "../utils/request.js";
import {ElMessage} from "element-plus"; // 若使用路由管理

// 路由实例（用于返回列表页）
const router = useRouter();
const id = useRoute().query.id
// 模拟用户详情数据
const userInfo = ref({
  id: 1,
  username: 'user1',
  password: 'encrypted123',
  phone: '13800138001',
  address: '北京市朝阳区建国路88号',
  credit: 80,
  avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  gender: '男',
  intro: '热爱生活，喜欢编程和旅行。目前从事前端开发工作，对Vue框架有深入研究。每周保持3次健身习惯，坚持阅读和学习新知识。',
  status: 1,
  salt: 'salt123$xyz',
  nickname: '阳光用户',
  signDays: 5
});
async function loadData() {
  try {
    const { data } = await server.get(`user/${id}`);
    if (data.code === 200) {
      userInfo.value = data.data;
    }
  } catch (error) {
    console.error("加载数据失败:", error);
    ElMessage.error('加载数据失败');
  }
}

onMounted(()=>{
  loadData()
})
// 返回列表页处理函数
const handleBack = () => {
  // 实际项目中可使用路由返回
  // router.push('/user-list');
  router.push("userList")
};
</script>

<style scoped>
.user-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.user-header {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border: 2px solid #f0f0f0;
}

.user-header-info {
  margin-left: 25px;
}

.user-name-group {
  display: flex;
  align-items: center;
}

.user-nickname {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
}

.user-username {
  margin: 8px 0 0;
  color: #666;
  font-size: 14px;
}
</style>